import React, { Component } from "react";

// 对于类组件来说，使用static defaultProps或者直接给类添加defaultProps属性
// 对于函数组件来说，只能给组件添加defaultProps属性

const Child1 = (props) => {
  return (
    <div>
      这是child1组件 - {props.name} - {props.age}
    </div>
  );
};
Child1.defaultProps = {
  name: "zhangsan",
  age: 500,
};

class Child2 extends Component {
  // 固定写法
  // static defaultProps = {
  //   name: "zhangsan",
  //   age: 200,
  // };

  render() {
    return (
      <div>
        这是child2组件 - {this.props.name} - {this.props.age}
      </div>
    );
  }
}
// js的语法，类的静态属性或者方法等价于直接挂载在类的上面
Child2.defaultProps = {
  name: "zhangsan",
  age: 200,
};

class App extends Component {
  render() {
    return (
      <>
        <h2>props的默认值</h2>
        <Child1 name="xiangge" age="18" />
        <Child2 name="laogao" />
      </>
    );
  }
}

export default App;
